<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小车</title>
	<style>
		.car{
			width:200px;
			height:100px;
			background:skyblue;
			border-radius:35% 35% 0 0;
			animation:mycar 5s infinite;
		}
		@keyframes mycar{
			0%{
				margin-left:0;			
			}
			50%{
				margin-left:1000px;				
			}
			100%{
				margin-left:0px;
			}
		}
		.all{

		}
		.left-lunzi{
			width:50px;
			height:50px;
			background:blue;
			float:left;
			margin-top:100px;
			border-radius:50%;
			text-align:center;
			line-height:45px;
			font-size:30px;
			animation:myleft-lunzi 5s infinite;
		}
		@keyframes myleft-lunzi{
			0%{
				
				transform:rotate(0deg);
			}
			50%{
			
				transform:rotate(180deg);			
			}
			/*100%{
				
				transform:rotate(0deg);
			}*/
		}
		.right-lunzi{
			width:50px;
			height:50px;
			background:blue;
			float:left;
			margin-top:100px;
			margin-left:100px;
			border-radius:50%;
			text-align:center;
			line-height:45px;
			font-size:30px;
			animation:myright-lunzi 5s infinite;
		}
		@keyframes myright-lunzi{
			0%{
				transform:rotate(0deg);
			}
			50%{
			
				transform:rotate(180deg);			
			}
			100%{
				
				transform:rotate(0deg);
			}
		}
	</style>
</head>
<body>
	<div class="car">
		<div class="all">
			<div class="left-lunzi">+</div>
			<div class="right-lunzi">+</div>
		</div>
	</div>
</body>
</html>